<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div class="block" style="margin-top:12px;" v-if="order">
        <flow>
          <flow-state :title="'提交申请'" is-done></flow-state>
          <!-- 如果流程中 -->
          <template v-if="order.after_sale_state==1||order.after_sale_state==2">
            <!-- 是否中审核中 -->
            <flow-line :tip="order.seller_state==1?'审核中':''" :is-done="order.seller_state!=1"></flow-line>

            <flow-state :title="'商家处理'" :is-done="order.seller_state!=1"></flow-state>
            <flow-line :is-done="order.seller_state!=1"></flow-line>

            <template v-if="order.return_type==2">
              <flow-state :title="order.type==2?'退货':order.type==3?'换货':'维修'" :is-done="true"></flow-state>
              <flow-line
                :tip="(order.type==2&&order.goods_state==3)||(order.type==3&&order.goods_state==5)?'':goods_state_enum[order.goods_state]"
                :is-done="(order.type==2&&order.goods_state==3)||(order.type==3&&order.goods_state==5)"
              ></flow-line>
            </template>

            <template v-if="order.refund_state>0">
              <flow-state :title="'退款'" :is-done="true"></flow-state>
              <flow-line
                :title="order.refund_state==2?'':refund_state_enum[order.refund_state]"
                :is-done="order.refund_state==2"
              ></flow-line>
            </template>

            <template v-if="order.after_sale_state==1">
              <flow-state :title="'完成'" :is-done="false"></flow-state>
            </template>
            <template v-else-if="order.return_type==2&&order.refund_state>0">
              <flow-state
                :title="'完成'"
                :is-done="order.refund_state==2&&((order.type==2&&order.goods_state==3)||(order.type==3&&order.goods_state==5))"
              ></flow-state>
            </template>
            <template v-else-if="order.return_type==2">
              <template
                v-if="(order.type==2&&order.goods_state!=3)||(order.type==3&&order.goods_state!=5)"
              >
                <flow-state :title="'完成'" :is-done="false"></flow-state>
              </template>
              <template v-else-if="order.refund_state!=1">
                <flow-state :title="'完成'" :is-done="true"></flow-state>
              </template>
              <template v-else>
                <flow-state :title="'完成'" :is-done="false"></flow-state>
              </template>
            </template>
            <template v-else-if="order.refund_state!=1">
              <flow-state :title="'完成'" :is-done="true"></flow-state>
            </template>
            <template v-else>
              <flow-state :title="'完成'" :is-done="false"></flow-state>
            </template>
          </template>

          <template v-if="order.after_sale_state==3||order.after_sale_state==4">
            <flow-line is-done></flow-line>
            <flow-state :title="order.after_sale_state==3?'商家拒绝':'用户取消'" is-done></flow-state>
            <flow-line is-done></flow-line>
            <flow-state :title="'完成'" :is-done="true"></flow-state>
          </template>
        </flow>
      </div>
      <div class="block" style="margin-top:12px;" v-if="order">
        <div class="invoiceitem header">
          <div class="text">售后信息</div>
          <div class="desc">{{order.state_desc}}</div>
        </div>
        <div class="invoiceitem">
          <div class="text">服务单号</div>
          <div>{{order.after_sale_sn}}</div>
        </div>
        <div class="invoiceitem">
          <div class="text">申请时间</div>
          <div>{{order.create_time}}</div>
        </div>
        <div class="invoiceitem">
          <div class="text">服务类型</div>
          <div>{{order.after_sale_type_desc}}</div>
        </div>
        <!-- <div class="invoiceitem">
          <div class="text">退款方式</div>
          <div>原返</div>
        </div>-->

        <!--非苏宁的其他商品的换货客户地址显示-->
        <template
          v-if="!isSuNing(orderDetail.seller_member_id) && extraDetail.address_info && (isRepair || isExchangeGoods)">
          <!--退货-->
          <div class="invoiceitem">
            <div class="text">收货地址</div>
            <div>{{extraDetail.address_info}}</div>
          </div>

          <div class="invoiceitem">
            <div class="text">联系人</div>
            <div>{{order.customer_name}}</div>
          </div>

          <div class="invoiceitem">
            <div class="text">联系电话</div>
            <div>{{order.customer_mobile}}</div>
          </div>
        </template>

        <div class="invoiceitem" style="justify-content: flex-end" v-if="order.state_desc!='已取消'">
          <div>
            <div
              class="cancel"
              v-if="order.after_sale_state==1 && order.goods_state<2"
              @click="onCancel"
            >取消售后申请
            </div>
            <div
              class="cancel"
              v-if="order.seller_state==2 && order.goods_state<2"
              @click="onShipments"
            >发货
            </div>
            <div class="cancel" v-if="order.goods_state==4" @click="onPut">确认收货</div>
          </div>
        </div>
      </div>

      <!--退货换货都需要显示-->
      <div class="block" style="margin-bottom: 12px"
           v-if="((extraDetail && extraDetail.return_address_info)) || isSuNingDeliveryMethod">
        <!--苏宁-->
        <template v-if="isSuNingDeliveryMethod">
          <div class="invoiceitem header">
            <div class="text">商家信息</div>
          </div>

          <div class="invoiceitem">
            <div class="text">商家地址</div>
            <div>{{extraDetail.as_factory_receive_info[0].returnAddress}}</div>
          </div>

          <div class="invoiceitem">
            <div class="text">联系人</div>
            <div>{{extraDetail.as_factory_receive_info[0].returnName}}</div>
          </div>

          <div class="invoiceitem">
            <div class="text">联系电话</div>
            <div>{{extraDetail.as_factory_receive_info[0].returnPhone}}</div>
          </div>
        </template>

        <!--如果是上门取件则显示商家上门取件-->
        <template v-if="extraDetail.pick_ware_type && parseFloat(extraDetail.pick_ware_type) === 4">
          <div class="invoiceitem header">
            <div class="text">商家信息</div>
          </div>

          <div class="invoiceitem">
            <div class="text">商家地址</div>
            <div>商家上门取件</div>
          </div>
        </template>
        <template v-else-if="extraDetail.return_address && extraDetail.return_address.name && extraDetail.return_address.mobile">
          <div class="invoiceitem header">
            <div class="text">商家信息</div>
          </div>

          <div class="invoiceitem">
            <div class="text">商家地址</div>
            <div>{{extraDetail.return_address_info}}</div>
          </div>

          <div class="invoiceitem">
            <div class="text">联系人</div>
            <div>{{extraDetail.return_address.name}}</div>
          </div>

          <div class="invoiceitem">
            <div class="text">联系电话</div>
            <div>{{extraDetail.return_address.mobile}}</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  import Me from '@/dll/me'
  import Enum from '@/config/enum'

  export default {
    name: 'mallOrderAfterSaleInfo',
    data () {
      return {
        xheader: {
          title: '售后详情'
        },
        return_type_enum: {
          1: '不用退货',
          2: '需要退货'
        },
        after_sale_state_enum: {
          1: '处理中',
          2: '完成',
          3: '拒绝',
          4: '取消'
        },
        seller_state_enum: {
          1: '待审核',
          2: '同意',
          3: '不同意',
          4: '验货不通过'
        },
        goods_state_enum: {
          1: '待客户发货',
          2: '待供应商收货',
          3: '供应商已收货',
          4: '供应商发货',
          5: '客户收货'
        },
        refund_state_enum: {
          0: '不退款',
          1: '退款中',
          2: '已退款'
        },
        order: null,
        after_sale_sn: '',
        extraDetail: {},
        orderDetail: {},

        AfterSalesType: Enum.AfterSalesType
      }
    },

    computed: {
      // 判断是苏宁的自营商品还是厂家配送的
      isSuNingDeliveryMethod () {
        return !!((this.isSuNing(this.orderDetail.seller_member_id) && this.extraDetail && this.extraDetail.as_factory_receive_info && this.extraDetail.as_factory_receive_info.length))
      },

      /** **************售后类型******************/

      // 是否换货
      isExchangeGoods () {
        return this.AfterSalesType.TExchangeGoods.value === this.order.type
      },

      // 是否退货
      isReturnGoods () {
        return this.AfterSalesType.TReturnGoods.value === this.order.type
      },

      // 是否退款
      isRefund () {
        return this.AfterSalesType.TRefund.value === this.order.type
      },

      // 是否维修
      isRepair () {
        return this.AfterSalesType.TRepair.value === this.order.type
      }
    },

    created () {
    },
    activated () {
      this.init()
    },
    methods: {
      init () {
        this.after_sale_sn = this.$route.params.id
        this.getInfo()
      },
      onShipments () {
        this.$router.push({
          name: 'mallOrderAfterSaleShipments',
          params: { id: this.after_sale_sn, extraDetail: this.extraDetail },
          query: { sellerMemberId: this.orderDetail.seller_member_id }
        })
      },
      async getInfo () {
        let param = {
          after_sale_sn: this.after_sale_sn
        }
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Me.getMallOrderAfterInfo(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.order = res.data
          this.extraDetail = res.data.extra
          this.orderDetail = res.data.order_info
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg,
            onHide: () => {
              this.$router.back()
            }
          })
        }
      },
      async onPut () {
        this.$vux.loading.show({
          text: '请稍后'
        })
        let res = await Me.mallOrderAfterPutGoods({
          after_sale_sn: this.after_sale_sn
        })
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '已确认收货',
            onHide: () => {
              this.getInfo()
            }
          })
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      },

      // 取消售后
      async onCancel () {
        this.$vux.loading.show({
          text: '请稍后'
        })
        let res = await Me.mallOrderAfterCancel({
          after_sale_sn: this.after_sale_sn
        })
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '已取消售后申请',
            onHide: () => {
              this.$router.back()
            }
          })
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .cancel {
    display: inline-block;
    padding: 5px 10px;
    border: #f5f5f5 1px solid;
  }

  .brokerageitem {
    background-color: #fff;
  }

  .brokerageitem .header {
    display: flex;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 17px;
    align-items: center;
  }

  .brokerageitem .ordernumber {
    flex: 1;
    color: #9f8d89;
  }

  .brokerageitem .state {
    color: #FF5722;
  }

  .brokerageitem .await {
    color: #FF5722;
  }

  .brokerageitem .complete {
    color: #52322c;
  }

  .brokerageitem .return {
    color: #f4b13b;
  }

  .brokerageitem .content {
    display: flex;
    flex-direction: row;
    padding: 12px 16px;
    border-top: 1px solid #fbf8f7;
    border-bottom: 1px solid #fbf8f7;
    align-items: center;
  }

  .brokerageitem .content .image {
    width: 90px;
    height: 90px;
    display: block;
    margin-right: 24px;
    background-color: #f5f5f5;
  }

  .brokerageitem .content .titlebar {
    display: flex;
    flex-direction: row;
  }

  .brokerageitem .content .title {
    flex: 1;
    font-size: 14px;
    color: #9f8d89;
    line-height: 20px;
    font-weight: 500;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .brokerageitem .content .pricebar {
    margin-top: 5px;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    color: #351009;
    line-height: 20px;
  }

  .brokerageitem .content .price {
    font-size: 14px;
    color: #FF5722;
  }

  .brokerageitem .footer {
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .brokerageitem .footer .left {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .brokerageitem .footer .right {
    display: flex;
    align-items: center;
  }

  .brokerageitem .footer .group {
    height: 24px;
    display: block;
    box-sizing: border-box;
    width: 54px;
    border: 1px solid #46241e;
    font-size: 10px;
    color: #46241e;
    line-height: 22px;
    text-align: center;
    border-radius: 12px;
  }

  .brokerageitem .footer .group.grouping {
    color: #FF5722;
    border-color: #FF5722;
  }

  .brokerageitem .footer .group + .group {
    margin-left: 8px;
  }

  .brokerageitem .footer .buttom {
    height: 28px;
    display: block;
    box-sizing: border-box;
    width: 64px;
    font-size: 12px;
    color: #46241e;
    line-height: 26px;
    text-align: center;
    border: 1px solid #d4d4d4;
  }

  .brokerageitem .footer .buttom.buttomred {
    color: #fff;
    border-color: #FF5722;
    background-color: #FF5722;
  }

  .brokerageitem .footer .buttom + .buttom {
    margin-left: 8px;
  }

  .invoiceitem {
    background-color: #fff;
    padding: 12px 24px;
    font-size: 12px;
    color: #9f8d89;
    display: flex;
    flex-direction: row;
    line-height: 17px;
  }

  .invoiceitem .text {
    margin-right: 5px;
    width: 65px;
    flex-shrink: 0;
  }

  .invoiceitem .right {
    width: 16px;
    height: 16px;
  }

  .invoiceitem.header {
    color: #351009;
  }

  .invoiceitem.header .desc {
    color: #FF5722;
  }

  .reciver_info {
    background-color: #fff;
    padding: 12px 24px;
    font-size: 12px;
    color: #9f8d89;
    line-height: 17px;
  }

  .reciver_info .invoiceitem {
    padding: 0;
  }
</style>
